<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>申请退款</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/drawback.css" />
</head>
<body>
   <div>
       <div class="head">
         <span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
           <h1 class="titles">申请退款</h1>
       </div>
       <div class="middles">
           <div class="merchan row">
               <div class="merch">
                   <img src="img/yifu.png" alt="">
               </div>
               <div class="introduce">
                   <p>夏日斜跨小包包女2018新款潮韩版百搭时尚</p>
                   <span>￥15</span>
               </div>
           </div>
           <div class="number">
               <span>退款金额:</span><span>￥2169.00</span>
           </div>
           <div class="number-one">
               <span>退款原因</span>
               <i class="iconfont icon-youjiantou"></i>
           </div>
           <div class="upload">
               <p>上传凭证</p>
               <img src="img/more.png" alt="">
           </div>
       </div>
       <div class="footer">
           <span>提交</span>
       </div>
   </div>
   <div id="mask">
   </div>
   <div id="is_link">
           <p>退款原因</p>
           <div>
               <ul>
                   <li>
                       <span>不喜欢/不想要</span>
                       <i class="iconfont icon-xuanzhong1"></i>
                   </li>
                   <li>
                       <span>空包裹</span>
                   </li>
                   <li>
                       <span>未按约定时间发货</span>
                   </li>
                   <li>
                       <span>快递/物流一直未送到</span>
                   </li>
                   <li>
                       <span>货物破损已拒签</span>
                   </li>
               </ul>
           </div>
       <button>确定</button>
   </div>
   <script src="js/x_rem.js"></script>
   <script src="./js/jquery-1.10.2.js"></script>
   <script src="js/all.js"></script>
   <script>
       $("#mask").click(function(e){
           if(e.target!==$("#is_link")){
               $(this).hide();
               $("#is_link").hide();
           }
       })
       $(function () {
           $(".number-one").click(function () {
               $("#is_link").css("display","block");
               $("#mask").css("display","block");
           })
           $("#is_link>button").click(function(){
               $("#is_link").hide();
               $("#mask").hide();
           })
       })
   </script>
</body>
</html>